<template>
    
    <div class="person">
        姓：<input type="text" v-model="firstNmame">
        名：<input type="text" v-model="lastName">
        <h1>全名：{{ fullName }}</h1>
        <h1>姓：{{ firstNmame }}</h1>
        <h1>名：{{ lastName }}</h1>
        <h1>全名2：{{ fullName02 }}</h1>
        <button @click="changeName">改名</button>
    </div>
</template>

<script setup name="Person" lang="ts">
  import {ref,computed} from 'vue'
  let firstNmame=ref('张')
  let lastName=ref('三')
  
  //let fullName=firstNmame.value+lastName.value;
  /*
    ()=>{}  箭头函数，类似于java的lambda表达式
   */
  /*
    computed：计算属性，根据已有数据计算出新数据
    这种方式是只读取计算属性
  */
   let fullName=computed(()=>{
    return firstNmame.value+lastName.value;
   })

   //既读取计算属性，也修改计算属性
   let fullName02=computed({
    get(){//取值
        return firstNmame.value+'~'+lastName.value;
    },
    set(val){//赋值
        console.log("修改了fullName02",val);
        //split('~')：把字符串根据 ~ 进行分割，形成字符串数组
        firstNmame.value=val.split('~')[0];
        lastName.value=val.split('~')[1];
    }
   })
   function changeName(){
    fullName02.value='王~五'
   }



</script>

<style scoped>
    .person{
        background-color:aquamarine;    /*背景颜色 */
        padding: 30px; /*内边距 */
        box-shadow: 0 0 10px; /*边框阴影 */
        border-radius: 10px;
    }
</style>

